<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户</title>
<style type="text/css">
*{padding:0;margin:0}
body{width:90%;font-size:14px;font-family:Microsoft Yahei;padding:40px;font-family:华文楷体}
		table{border-collapse: collapse; border-spacing: 0;width:100%;border: 1px solid #ccc;}
		table th{background-color: #f1f1f1;}
		table th, table td{border: 1px solid #ccc;color:#555;padding:5px 10px;}
		input{border:1px solid #eee;padding:3px 6px;color:#666;}
		form{height:50px;}
		.topbar{height:60px;padding:0;}
		.topbar li{float:left;padding-right:20px;list-style:none;}
		ul{list-style:none}
		nav ul  li{min-width:100px;min-height:50px;float:left}
		header{background-color:#f1f1f1;min-height:70px;width:100%;line-height:70px}
		header ul  li{min-width:100px;min-height:50px;float:left;}
		footer ul li{ min-width:100px;min-height:50px;float:left}
		a{text-decoration: none;}
		a:visited{ color:black}
		aside {
			width:200px;
			min-height:500px;
			background-color:#f1f1f1;
			over-flow:auto;
			float:left;
		}
		
		section{
			float:left;
			width:800px;
			min-height:500px;
			
		}
		section  iframe{
			width:100%;
			height:600px;
			border:none;
		}
		
		



</style>	

<script type="text/javascript" src="static/js/lanqiao.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>





</head>
<body>
	<h2>基于Vue 使用Servlet完成一个前后端分离版本的增删改查案例</h2>
	<br/>
	<h3>顾客登陆</h3>
	<br/>
	
	<div id="app">
	
		<table border="1" style="width:600px">
			
				 <tr>
				    <th>用户名</th>
				    <td>
				    	<input type="text" v-model="user.username"  />
				    </td>
			
				   
				</tr>
				  <tr>
				    <th>密码</th>
				    <td>
				    <input type="text" v-model="user.password" />
				     
				    </td>
				    
				 
				</tr>

				
				 <tr>
				    <th></th>
				    <td>
				       <input type="button"  value="登录"  v-on:click="login" />
				     <a href="products.html">免登陆购物</a>
				    </td>
				     
				  
				</tr>
	</table>
	
	<br/>
	
	<h3>管理员登陆</h3>
	<br/>
		<table border="1" style="width:600px">
			
				 <tr>
				    <th>用户名</th>
				    <td>
				    	<input type="text" v-model="admin.username"  />
				    </td>
			
				   
				</tr>
				  <tr>
				    <th>密码</th>
				    <td>
				    <input type="text" v-model="admin.password" />
				     
				    </td>
				    
				 
				</tr>

				
				 <tr>
				    <th></th>
				    <td>
				       <input type="button"  value="登录"  v-on:click="adminLogin" />
				     	
				    </td>
				     
				  
				</tr>
	</table>
	
	
	
	
		
	</div>
</body>


<script type="text/javascript">
		var vue =new Vue({
			el:'#app',
			data:{
				user:{
					username:'',
					password:''
				},
				admin:{
					username:'',
					password:''
				}
			},
			methods:{
				login:function(){
					$.post("/Tust-lanqiao-demo/login",this.user,function(data){
						if(data.code!=200){
							 alert(data.info);
						}else{
							window.location.href="products.html";
						}
						
					},"json");
				},
				adminLogin:function(){
					$.post("/Tust-lanqiao-demo/adminLogin",this.admin,function(data){
						
					if(data.code!=200){
							 alert(data.info);
						}else{
							_Global_Session.Set("loginTokenKey",data.data);
							window.location.href="main.html";
						}
					
					},"json");
				}
				
			}
			
			
		});


</script>


</html>